<template>
  <div class="p-2">
    <Flex justify="space-between" horizontal align="center">
      <div>
        <Icon icon="ion:arrow-right-b" color="#108ee9"></Icon>
        <strong>{{ deptInfo }}</strong>
      </div>
      <div>
        <a-button type="primary"> 提交 </a-button>
      </div>
    </Flex>
    <div> </div>
    <Divider style="margin: 10px" />
    <div style="height: 520px">
      <ScrollContainer ref="scrollRef">
        <table class="hand-table">
          <thead>
            <tr>
              <th>项目编码</th>
              <th>项目名称</th>
              <th>结果值</th>
              <th>单位</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in itemData" :key="item.id">
              <td>{{ item.itemNumber }}</td>
              <td>{{ item.itemName }}</td>
              <td> <a-input style="width: 180px" /> </td>
              <td>{{ item.measuring }}</td>
            </tr>
          </tbody>
        </table>
      </ScrollContainer>
    </div>
    <Divider style="margin: 10px" />
    <Form layout="inline" class="hand-form">
      <FormItem label="检验医师">
        <Select style="width: 100px">
          <SelectOption value="demo">王医生</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="审核医师">
        <Select style="width: 100px">
          <SelectOption value="demo">王医生</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="检查日期">
        <DatePicker />
      </FormItem>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps } from 'vue';
  import { Form, FormItem, Select, SelectOption, DatePicker, Divider, Flex } from 'ant-design-vue';
  import { ScrollContainer } from '@/components/Container';
  import Icon from '@/components/Icon/Icon.vue';

  const props = defineProps({ itemData: ref([]), deptInfo: ref() });
</script>

<style lang="less" scoped>
  .hand-table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    border-radius: 8px;
  }
  .hand-table th {
    border: 1px solid #e8e8e8;
    padding: 10px;
    text-align: center;
  }
  .hand-table td {
    border: 1px solid #e8e8e8;
    padding: 5px;
    text-align: center;
  }
  .hand-table th {
    background-color: #fafafa;
    color: #333;
    font-weight: bold;
  }
  .hand-table td {
    background-color: #fff;
    color: #555;
  }
  .hand-table tr:nth-child(even) {
    background-color: #fafafa;
  }
  .hand-table tr:hover {
    background-color: #f6f6f6;
  }
  .hand-form {
    margin-top: 15px;
  }
</style>
